<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Vue中的过滤器</title>
    <!-- 引入vue.js -->
    <script src="vue/vue.js"></script>
</head>

<body>
    <div id="app-7">
        <p>{{message}}</p>
        <p>{{message | toUpper}}</p>
        <p>{{percent | toPercentage}}</p>
    </div>
    <script>

        var app7 = new Vue({
            el: '#app-7',
            data: {
                message: 'hello,vue.js',
                percent: 0.025
            },
            filters: {
                toUpper: function (value) {
                    return value.toUpperCase()
                },
                toPercentage: function (value) {
                    return value * 100 + '%'
                }
            }
        })
    </script>
</body>

</html>
